<!DOCTYPE html>
<html lang="en">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>旧房详情App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/dist/css/oa-app.css">
<style>
    .biTian {
        position: absolute;
        margin-left: -10px;
        margin-top: 1px;
    }
    td{
        color: #228bee;
    }
    #divUploadedFiles{
        /*padding: 4px;*/
        padding-bottom: 0;
    }
    [v-cloak]{
        display: none;
    }
</style>
<head>

</head>
<body>
<div id="app" v-cloak>
    <table class="oa-table ">
        <thead>
        <tr class="oa-table-title" >
            <th>公司人员信息</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table ">
        <tbody>
        <tr class="oa-table-title-gray">
            <th style="width:25%;border-top: none"><i class="biTian">*</i>归属公司</th>
            <td style="width: 75%;border-top: none;text-align: left;padding-left: 4px" colspan="3">{{displace.companyName}}</td>
        </tr>
        <tr class="oa-table-title-gray">
            <th style="width:25%;border-top: none">区域</th>
            <td style="width: 75%;border-top: none;text-align: left;padding-left: 4px" colspan="3">{{displace.regionName}}</td>
        </tr>
        <tr class="oa-table-title-gray">
            <th style="width:25%;border-top: none">大区经理</th>
            <td style="width:25%;border-top: none;text-align: left;padding-left: 4px">{{displace.bigregionManagerName}}</td>
            <th style="width:25%;border-top: none">区域经理</th>
            <td style="width:25%;border-top: none;text-align: left;padding-left: 4px">{{displace.regionManagerName}}</td>
        </tr>
        </tbody>
    </table>
    <table class="oa-table ">
        <thead>
        <tr class="oa-table-title" >
            <th style="border-top: none">基本信息</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table ">
        <tbody>
        <tr class="oa-table-title-gray">
            <th style="border-top: none"><i class="biTian">*</i>房屋类型</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{displace.replacementType}}</td>
            <th style="border-top: none"><i class="biTian">*</i>所在地</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{displace.storeAddress}}</td>
        </tr>
        <tr class="oa-table-title-gray">
            <th style="border-top: none"><i class="biTian">*</i>房屋名称</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" class="oa-lineOne"  @click.stop="showMore($event.target)">{{displace.houseName}}</td>
            <th style="border-top: none"><i class="biTian">*</i>楼号、单元</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{displace.buildingNumber}}</td>
        </tr>
        <tr class="oa-table-title-gray">
            <th style="border-top: none">面积(平方米)</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{displace.area}}</td>
            <th style="border-top: none"><i class="biTian">*</i>房屋位置</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{displace.houseAddress}}</td>
        </tr>
        <tr class="oa-table-title-gray">
            <th style="border-top: none">产权年限</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{displace.housesProperty}}</td>
            <th style="border-top: none"><i class="biTian">*</i>状态</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{displace.state}}</td>
        </tr>
        <tr class="oa-table-title-gray">
            <th style="border-top: none"><i class="biTian">*</i>是否过户</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{displace.transfer}}</td>
            <th style="border-top: none">评估价格(元)</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{fmoney(displace.estimatePrice)}}</td>
        </tr>
        <tr class="oa-table-title-gray">
            <th style="border-top: none">置换价格(元)</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" >{{fmoney(displace.replacementPrice)}}</td>
            <th style="border-top: none">出售价格(元)</th>
            <td style="border-top: none;text-align: left;padding-left: 4px">{{fmoney(displace.sellPrice)!=0?displace.sellPrice:"未出售"}}</td>
        </tr>
        <tr class="oa-table-title-gray">
            <th style="border-top: none">不动产权证/合同/协议</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" colspan="3">
                <div class="fj-tanzhongStyle fj-one-tanzhongStyle"  v-for="(attach,i) in displace.attaches">
                    <b :class="fjStyle(attach.url)"></b>
                    <div class="name" style="width: 165px;" :title="attach.name"
                         v-on:click="look(attach.url)">
                        {{attach.name}}
                    </div>
                    <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                         v-on:click="look(attach.url)">下载</a>
                    </div>
                </div>
               <!-- <div id="divUploadedFiles">
                    <div class="fj-tanzhongStyle "  v-for="(attach,i) in displace.attaches">
                        <b :class="fjStyle(attach.name)"></b>
                        <div class="name" v-if="attach.name" :title="attach.name" v-on:click="download(attach.url,attach.name)">{{attach.name}}</div>
                        <div class="down"><a href="javascript:void(0)" class="nui-txt-link" v-on:click="download(attach.url,attach.name)">下载</a></div>c
                    </div>
                </div>-->
            </td>
        </tr>
        <tr class="oa-lineTwo-H">
            <th style="border-top: none;background: #f8f8f8">备注</th>
            <td style="border-top: none;text-align: left;padding-left: 4px" colspan="3">{{displace.remark}}</td>
        </tr>
        </tbody>
    </table>
    <table class="oa-table ">
        <thead>
        <tr class="oa-table-title">
            <th style="border-top: none">审批进度</th>
        </tr>
        </thead>
    </table>
    <table class="oa-table ">
        <tbody>
        <tr class="oa-table-title-gray">
            <th style="border-top: none">审核人员</th>
            <th style="border-top: none">审核状态</th>
            <th style="border-top: none">审核时间</th>
            <th style="border-top: none">审核意见</th>
        </tr>
        <tr class="oa-table-title-gray">
            <td style="border-top: none">{{displace.auditName}}</td>
            <td style="border-top: none">{{convertAuditFlagToName(displace.auditFlag)}}</td>
            <td style="border-top: none">{{formatDate(displace.auditTime)}}</td>
            <td style="border-top: none">{{displace.auditAdvise}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="https://file.ggxqce.com/web/axios.min.js"></script>
<script src="/dist/js/newOaApp.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            id:getUrlParamObj().id,
            displace:{},
            pageType:getUrlParamObj().pageType
        },
        methods:{
            showMore: function (event) {
                var el = event
                var text = el.innerText;
                if (text != "") {
                    text = "<i></i>" + text;
                    var mydiv = document.getElementById("oa-more");
                    if (!mydiv) {
                        var div = document.createElement("div");
                        div.setAttribute("id", "oa-more");
                        document.body.appendChild(div);
                        mydiv = document.getElementById("oa-more");
                    }
                    if (mydiv.offsetParent === null) {
                        mydiv.style.display = 'block';
                        mydiv.innerHTML = text;
                        mydiv.style.width = el.offsetWidth + 'px';
                        mydiv.style.left = el.getBoundingClientRect().left + 'px';
                        console.log(el.height)
                        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
                        mydiv.style.top = ( scrollTop + el.getBoundingClientRect().top + el.offsetHeight + "px")
                    } else {
                        mydiv.style.display = 'none';
                    }

                } else {
                    var mydiv = document.getElementById("oa-more");
                    mydiv.style.display = 'none';
                }

                document.onclick = function () {
                    var mydiv = document.getElementById("oa-more");
                    if (mydiv) {
                        mydiv.style.display = "none";
                    }
                };
            },
            formatDate: function (now) {
                if(now){
                    return new Date(now).Format(TimeFormat.middle)
                }else{
                    return  "";
                }
            },
            getOldHouseDetail:function () {
                var that = this;
                that.showLoading();
                axios.post("/deviceDisplace/getDisplaceById.json", {id:that.id})
                    .then(function (r) {
                        that.displace = r.displace;
                        console.log(that.oldCarInfo)
                        that.hideLoading();
                    })
            },
            /*数字判断限制*/
            fmoney: function (s, n) {

                   n = n > 0 && n <= 20 ? n : 2;
                   s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                   var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                       t = "";
                   for (i = 0; i < l.length; i++) {
                       t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                   }
                   return t.split("").reverse().join("") + "." + r;

            },
            fjStyle:function(fjName){
                if(fjName){
                    var type=fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-'+type
                }
                return 'img'
            },
            look: function (url) {
                var param = {
                    url: url,
                }
                JSBridge.call(FILE, 'showFile', param)
            },
            download: function (attachId, fileName) {
                downloadFile(attachId,fileName)
                return false;
            },
            convertAuditFlagToName: function (auditFlag) {
                //auditFlag:-1,0,1,2,3,4,5,6
                switch (auditFlag) {
                    case -1:
                        return "未提交";
                        break;
                    case 0:
                        return "审核中";
                        break;
                    case 1:
                        return "通过";
                        break;
                    case 2:
                        return "驳回";
                        break;
                    default :
                        break;
                }
            },
            showLoading: function () {
                var that = this
                var param = {
                    cancelable: false
                }
                JSBridge.call(UI, 'showLoading', param)


            },
            hideLoading: function () {
                JSBridge.call(UI, 'hideLoading')
            }
        },
        mounted:function () {
            var that=this;
            that.getOldHouseDetail();
        }
    })
</script>
</body>
</html>